﻿@{
	Layout = null;
	ViewData["Title"] = "检测项设置";
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>检测项设置</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
	<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

	<div class="layui-card" style="margin:20px;">
		<div class="layui-card-header">
			<div class="layui-row">
				<div class="layui-col-md6">
					<h2>检测项设置</h2>
				</div>
				<div class="layui-col-md6" style="text-align: right;">
					<button class="layui-btn layui-btn-danger" id="btnBatchDelete">
						<i class="layui-icon">&#xe640;</i> 批量删除
					</button>
					<button class="layui-btn" id="btnAdd">
						<i class="layui-icon">&#xe654;</i> 新增检测项
					</button>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<!-- 搜索栏 -->
			<form class="layui-form layui-form-pane" lay-filter="searchForm">
				<div class="layui-form-item">

					<div class="layui-inline">
						<label class="layui-form-label">检测项名称</label>
						<div class="layui-input-inline">
							<input type="text" name="itemSettingsName" placeholder="请输入检测项名称" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button class="layui-btn" lay-submit lay-filter="searchBtn">
							<i class="layui-icon">&#xe615;</i> 搜索
						</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>

			<!-- 数据表格 -->
			<table id="itemSettingsTable" lay-filter="itemSettingsTable"></table>
		</div>
	</div>

	<!-- 表格操作列模板 -->
	<script type="text/html" id="tableBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	<!-- 新增/编辑表单 -->
	<script type="text/html" id="itemSettingsForm">
		<form class="layui-form" style="padding: 10px;" lay-filter="itemSettingsForm">
			<input type="hidden" name="id">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:120px">检测项编码</label>
				<div class="layui-input-block">
					<input type="text" name="itemSettingsCode" required lay-verify="required" placeholder="请输入检测项编码" autocomplete="off" class="layui-input" readonly>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:120px">检测项名称</label>
				<div class="layui-input-block">
					<input type="text" name="itemSettingsName" required lay-verify="required" placeholder="请输入检测项名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:120px">检测项类型</label>
				<div class="layui-input-block">
							<select  name="itemSettingsType" required lay-verify="required"  lay-filter="itemSettingsType" placeholder="请选择检测项类型" >
								<option value="外观">外观</option>
									  <option value="尺寸">尺寸</option>
											<option value="性能">性能</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:120px">检测工具</label>
				<div class="layui-input-block">
					<input type="text" name="itemSettingStool" required lay-verify="required" placeholder="请输入检测工具" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</script>

	<script>
		layui.use(['table', 'form', 'layer'], function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;

			// 初始化表格
			table.render({
				elem: '#itemSettingsTable',
				url: '/ItemSettings/ShowItemSettings',
				page: true,
				where: {},
				request: {
					pageName: 'pageIndex',
					limitName: 'pageSize'
				},
				cols: [[
					{type:'checkbox'},
					{field: 'id', title: 'ID', width: 80, sort: true},
					{field: 'itemSettingsCode', title: '检测项编码', width: 150},
					{field: 'itemSettingsName', title: '检测项名称', width: 150},
					{field: 'itemSettingsType', title: '检测项类型', width: 120},
					{field: 'itemSettingStool', title: '检测工具', width: 120},
					{title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
				]]
			});

			// 搜索按钮点击事件
			form.on('submit(searchBtn)', function(data){
				table.reload('itemSettingsTable', {
					where: data.field
				});
				return false;
			});

			// 新增按钮点击事件
			$('#btnAdd').on('click', function(){
				// 生成9位随机数字编码
				var randomCode = Math.floor(100000000 + Math.random() * 900000000).toString();
				layer.open({
					type: 1,
					title: '新增检测项',
					area: ['500px', '400px'],
					content: $('#itemSettingsForm').html(),
					success: function(layero, index){
						layui.form.val('itemSettingsForm', {
							id: null,
							itemSettingsCode: randomCode,
							itemSettingsName: '',
							itemSettingsType: '',
							itemSettingStool: ''
						});
						// 确保编码显示
						$(layero).find('input[name="itemSettingsCode"]').val(randomCode);
						layui.form.render();
					}
				});
			});

			// 批量删除按钮点击事件
			$('#btnBatchDelete').on('click', function(){
				var checkStatus = table.checkStatus('itemSettingsTable');
				var data = checkStatus.data;
				if(data.length === 0){
					layer.msg('请至少选择一条数据', {icon: 0});
					return;
				}
				layer.confirm('确定要删除选中的' + data.length + '条数据吗？', {
					icon: 3,
					title: '提示'
				}, function(index){
					var ids = data.map(function(item){
						return item.id;
					});
					$.ajax({
						url: '/ProductionSystem/ItemSettings/DelMany',
						type: 'POST',
						contentType: 'application/json',
						data: JSON.stringify(ids),
						success: function(res){
							layer.msg('删除成功', {icon: 1});
							table.reload('itemSettingsTable');
						},
						error: function(){
							layer.msg('删除失败', {icon: 2});
						}
					});
					layer.close(index);
				});
			});

			// 表格工具条事件
			table.on('tool(itemSettingsTable)', function(obj){
				var data = obj.data;
				if(obj.event === 'del'){
					layer.confirm('确定删除此检测项？', function(index){
						$.ajax({
							url: '/ItemSettings/DelItemSettings',
							type: 'DELETE',
							data: { id: data.id },
							success: function(res){
								layer.msg('删除成功');
								obj.del();
							},
							error: function(){
								layer.msg('删除失败');
							}
						});
						layer.close(index);
					});
				} else if(obj.event === 'edit'){
					// 获取单条数据详情
					$.get('/ItemSettings/GetItemSettings', { id: data.id }, function(res){
						layer.open({
							type: 1,
							title: '编辑检测项',
							area: ['500px', '400px'],
							content: $('#itemSettingsForm').html(),
							success: function(layero, index){
								// 填充表单数据
								layui.form.val('itemSettingsForm', {
									id: res.id,
									itemSettingsCode: res.itemSettingsCode,
									itemSettingsName: res.itemSettingsName,
									itemSettingsType: res.itemSettingsType,
									itemSettingStool: res.itemSettingStool
								});
								layui.form.render();
							}
						});
					});
				}
			});

			// 表单提交事件
			form.on('submit(submitForm)', function(data){
				var url = data.field.id ? '/ItemSettings/UpdateItemSettings' : '/ItemSettings/AddItemSettings';
				var method = data.field.id ? 'PUT' : 'POST';
				// 确保新增时id为0或空字符串
				if (!data.field.id || data.field.id === '') {
					data.field.id = 0;
				}
				// 组装DTO
				var submitData = {
					Id: parseInt(data.field.id),
					ItemSettingsCode: data.field.itemSettingsCode,
					ItemSettingsName: data.field.itemSettingsName,
					ItemSettingsType: data.field.itemSettingsType,
					ItemSettingStool: data.field.itemSettingStool
				};
				$.ajax({
					url: url,
					type: method,
					contentType: 'application/json',
					data: JSON.stringify(submitData),
					success: function(res){
						layer.closeAll();
						layer.msg('保存成功');
						table.reload('itemSettingsTable');
					},
					error: function(){
						layer.msg('保存失败');
					}
				});
				return false;
			});
		});
	</script>

</body>
</html>
